{% extends "base.html" %}

{% block title %}报告生成 - {{ app_name }}{% endblock %}

{% block page_title %}报告生成{% endblock %}

{% block page_subtitle %}AI智能报告生成与管理{% endblock %}

{% block content %}
<div class="fade-in">
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="stat-card bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-file-alt text-2xl"></i>
                </div>
                <span class="text-3xl font-bold">28</span>
            </div>
            <p class="text-blue-100">总报告数</p>
            <p class="text-xs text-blue-200 mt-2">
                <i class="fas fa-arrow-up mr-1"></i>
                本月新增 5 份
            </p>
        </div>

        <div class="stat-card bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-robot text-2xl"></i>
                </div>
                <span class="text-3xl font-bold">15</span>
            </div>
            <p class="text-green-100">AI生成报告</p>
            <p class="text-xs text-green-200 mt-2">
                占比 53.6%
            </p>
        </div>

        <div class="stat-card bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl p-6 text-white">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-clock text-2xl"></i>
                </div>
                <span class="text-3xl font-bold">2.5</span>
            </div>
            <p class="text-yellow-100">平均生成时长</p>
            <p class="text-xs text-yellow-200 mt-2">
                较上月缩短 0.8分钟
            </p>
        </div>

        <div class="stat-card bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-star text-2xl"></i>
                </div>
                <span class="text-3xl font-bold">4.7</span>
            </div>
            <p class="text-purple-100">平均质量评分</p>
            <p class="text-xs text-purple-200 mt-2">
                <i class="fas fa-arrow-up mr-1"></i>
                较上月提升 0.2
            </p>
        </div>
    </div>

    <!-- 报告生成工具 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
        <h3 class="text-lg font-semibold text-slate-800 mb-4">快速生成报告</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- 报告类型 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">报告类型</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>月度分析报告</option>
                    <option>季度分析报告</option>
                    <option>年度分析报告</option>
                    <option>专题分析报告</option>
                    <option>问题分析报告</option>
                </select>
            </div>

            <!-- 分析范围 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">分析范围</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>全市范围</option>
                    <option>指定区域</option>
                    <option>指定类型</option>
                    <option>自定义范围</option>
                </select>
            </div>

            <!-- 生成方式 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">生成方式</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>AI智能生成</option>
                    <option>使用模板</option>
                    <option>手动创建</option>
                </select>
            </div>
        </div>

        <div class="flex justify-end mt-4">
            <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                <i class="fas fa-magic mr-2"></i>开始生成
            </button>
        </div>
    </div>

    <!-- 报告列表 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold text-slate-800">历史报告</h3>
            <div class="flex space-x-2">
                <div class="relative">
                    <input type="text" placeholder="搜索报告..." class="pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <i class="fas fa-search absolute left-3 top-3 text-slate-400"></i>
                </div>
                <button class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50">
                    <i class="fas fa-filter mr-2"></i>筛选
                </button>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="text-left p-4 font-semibold text-slate-700">报告名称</th>
                        <th class="text-left p-4 font-semibold text-slate-700">类型</th>
                        <th class="text-left p-4 font-semibold text-slate-700">生成时间</th>
                        <th class="text-left p-4 font-semibold text-slate-700">状态</th>
                        <th class="text-left p-4 font-semibold text-slate-700">操作</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-alt text-blue-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-slate-800">2024年1月信访分析月报</p>
                                    <p class="text-sm text-slate-500">AI智能生成</p>
                                </div>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full">月度报告</span>
                        </td>
                        <td class="p-4 text-slate-600">2024-01-15 14:30</td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">已完成</span>
                        </td>
                        <td class="p-4">
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download"></i>
                                </button>
                                <button class="text-slate-600 hover:text-slate-800">
                                    <i class="fas fa-share"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-alt text-purple-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-slate-800">2023年第四季度信访分析报告</p>
                                    <p class="text-sm text-slate-500">AI智能生成</p>
                                </div>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded-full">季度报告</span>
                        </td>
                        <td class="p-4 text-slate-600">2024-01-10 09:15</td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">已完成</span>
                        </td>
                        <td class="p-4">
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download"></i>
                                </button>
                                <button class="text-slate-600 hover:text-slate-800">
                                    <i class="fas fa-share"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-alt text-yellow-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-slate-800">噪音扰民问题专题分析</p>
                                    <p class="text-sm text-slate-500">AI智能生成</p>
                                </div>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full">专题报告</span>
                        </td>
                        <td class="p-4 text-slate-600">2024-01-08 16:45</td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">已完成</span>
                        </td>
                        <td class="p-4">
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download"></i>
                                </button>
                                <button class="text-slate-600 hover:text-slate-800">
                                    <i class="fas fa-share"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-alt text-indigo-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-slate-800">2023年年度信访分析总报告</p>
                                    <p class="text-sm text-slate-500">使用模板生成</p>
                                </div>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full">年度报告</span>
                        </td>
                        <td class="p-4 text-slate-600">2024-01-05 11:20</td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">已完成</span>
                        </td>
                        <td class="p-4">
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download"></i>
                                </button>
                                <button class="text-slate-600 hover:text-slate-800">
                                    <i class="fas fa-share"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-alt text-red-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-slate-800">福田区信访问题分析报告</p>
                                    <p class="text-sm text-slate-500">正在生成中...</p>
                                </div>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full">区域报告</span>
                        </td>
                        <td class="p-4 text-slate-600">2024-01-15 15:00</td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full">生成中</span>
                        </td>
                        <td class="p-4">
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="text-red-600 hover:text-red-800">
                                    <i class="fas fa-stop"></i>
                                </button>
                                <button class="text-slate-600 hover:text-slate-800">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="flex items-center justify-between mt-6">
            <p class="text-sm text-slate-600">
                显示 1-5 条，共 28 条记录
            </p>
            <div class="flex space-x-2">
                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 disabled:opacity-50" disabled>
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="px-3 py-1 bg-indigo-600 text-white rounded-lg">1</button>
                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50">2</button>
                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50">3</button>
                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 报告生成功能
    document.addEventListener('DOMContentLoaded', function() {
        // 快速生成报告按钮
        const generateBtn = document.querySelector('button[class*="bg-indigo-600"]');
        if (generateBtn && generateBtn.textContent.includes('开始生成')) {
            generateBtn.addEventListener('click', function() {
                // 显示加载状态
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>生成中...';
                this.disabled = true;
                
                // 模拟生成过程
                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.disabled = false;
                    // 显示成功提示
                    showNotification('报告生成任务已提交，请稍后查看', 'success');
                }, 2000);
            });
        }
        
        // 搜索功能
        const searchInput = document.querySelector('input[placeholder="搜索报告..."]');
        if (searchInput) {
            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                const rows = document.querySelectorAll('tbody tr');
                
                rows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    row.style.display = text.includes(searchTerm) ? '' : 'none';
                });
            });
        }
    });
</script>
{% endblock %}